{% extends base.html %}

{% block body %}

<a id="backLink">返回目录</a>
<div class="col-md-12" style="text-align: center;">
    <button class="backward" style="float: left;">上一页</button>
    <span style="text-align: center;"><button class="read">阅读</button></span>
    <button class="forward" style="float: right;">下一页</button>
</div>

<div class="col-md-12" id="progress"></div>
<div class="col-md-12" id="content"></div>

<div class="col-md-12" style="text-align: center;">
    <button class="backward" style="float: left;">上一页</button>
    <button class="forward" style="float: right;">下一页</button>
</div>


<script type="text/javascript">
    var path = getUrlParams().path;
    var _from = getUrlParams().from;
    var autoForward = false;
    var readLength = 1000;

    $("#backLink").attr("href", _from);

    function readbook(direction, read) {
        $.get("/api/readbook", {path: path, read: "false", direction: direction, length: readLength}, function (resp) {
            var text = resp.data;
            // 显示阅读内容
            text = text.replace(/\</gi, "&lt;");
            text = text.replace(/\>/gi, "&gt;");
            text = text.replace(/ /gi, "&nbsp;");
            text = text.replace(/\n/gi, "<br>");
            $("#content").html(text);
            $("#progress").text((resp.current/resp.size*100).toFixed(2) + "%");
            // 先前进，再读这一章节
            if (read == "true") {
                // read 永远是当前章节
                $.get("/api/readbook", {path: path, read: "true", direction: "current", length: readLength}, function (resp) {
                    if (autoForward) {
                        setTimeout(function () {
                            readbook("forward", read);
                        })
                    }
                });
            } 
        })
    }
    $(".read").click(function () {
        autoForward = true;
        readbook("current", "true");
    });

    $(".forward").click(function () {
        autoForward = false;
        readbook("forward", "false");
    });

    $(".backward").click(function () {
        autoForward = false;
        readbook("backward", "false")
    });

    readbook("current", "false");
</script>

{% end %}